<!-- 开启单选,可自定义高度 -->

<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      ref="table"
      :height="curHeight"
      highlight-current-row
      @current-change="handleCurrentChange"
      :row-style="{ height: '40px' }"
      :cell-style="{ padding: '0' }"
    >
      <!-- 字段列展示 begin -->
      <el-table-column label="序号" align="center" width="60" fixed>
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <!-- 列头只有一行，没有合并的情况 -->

      <!-- 列头有合并的情况 -->
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        :width="item.width ? item.width : 'auto'"
        :align="item.align ? item.align : 'center'"
        v-for="(item, index) in tableColumn"
        :key="index"
      >
        <template slot-scope="scope">
          <slot :name="scope.row[item.prop]" :params="scope.row">
            {{
              item.dictName
                ? getDictValue(item.dictName, scope.row[item.prop])
                : scope.row[item.prop]
            }}
          </slot>
        </template>
        <div v-if="item.children && item.children.length > 0">
          <el-table-column
            :prop="child.prop"
            :label="child.label"
            :width="child.width ? child.width : 'auto'"
            :align="child.align ? child.align : 'center'"
            v-for="(child, cIndex) in item.children"
            :key="cIndex"
          >
            <template slot-scope="scope">
              <slot :name="scope.row[child.prop]" :params="scope.row">
                {{
                  child.dictName
                    ? getDictValue(child.dictName, scope.row[child.prop])
                    : scope.row[child.prop]
                }}
              </slot>
            </template>
          </el-table-column>
        </div>
      </el-table-column>
      <!-- 字段列展示 end -->

      <!-- 操作按钮集合 begin -->
      <el-table-column
        v-if="tableBtn && tableBtn.length > 0"
        fixed="right"
        label="操作"
        :width="btnListWidth ?? tableBtn.length * 45"
      >
        <template slot-scope="scope">
          <el-button
            v-if="tableBtn.includes('edit')"
            @click.native.prevent="editRow(scope.$index, tableData)"
            type="text"
            size="small"
          >
            编辑
          </el-button>
          <el-button
            v-if="tableBtn.includes('view')"
            @click.native.prevent="viewRow(scope.$index, tableData)"
            type="text"
            size="small"
          >
            详情
          </el-button>
          <el-button
            v-if="tableBtn.includes('lookSMJ')"
            @click.native.prevent="lookSMJRow(scope.$index, tableData)"
            type="text"
            size="small"
          >
            查看扫描件
          </el-button>
          <el-button
            v-if="tableBtn.includes('delete')"
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
            style="color: red"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <!-- 操作按钮集合 end -->
    </el-table>
    <div class="mcCommonPager" v-if="tableData && tableData.length > 0">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="count"
        :page-size="size"
        :current-page="current"
        @current-change="pageChange"
      >
        >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { PopupCommon } from "@/libs/popupCommon";
import { Utility } from "@/libs/utility";

// pageNo 当前第几页
// pageSize 每页条数

export default {
  props: {
    /** 数据源：这里不确定字段，只要是数组就可以 */
    dataSource: {
      /** 这里不确定字段，只要是数组就可以 */
      type: Array,
      required: true,
    },
    /** 自定义列 */
    tableColumns: {
      /** 格式： [{prop:"",label:"",width:"",children:[{prop:"",label:"",width:""]}] 其中宽度可以不写，目前只支持列头合并两行的情况，暂未做动态循环配置。 */
      type: Array,
      required: true,
    },
    /** 操作按钮集合 */
    btnList: {
      /** 格式：['edit','view','delete','lookSMJ'] ，可以给空 */
      type: Array,
    },
    btnListWidth: {
      type: String,
      require: false,
    },
    /** 一页显示多少条数据 */
    pageSize: {
      type: Number,
      require: true,
    },
    /** 总共有多少条数据 */
    pageCount: {
      type: Number,
      require,
    },
    /** 当前第几页 */
    pageNo: {
      type: Number,
      require,
    },
    /** 高度 */
    height: {
      type: Number,
      require,
    },
  },
  computed: {
    tableData() {
      return this.dataSource;
    },
    tableColumn() {
      return this.tableColumns;
    },
    tableBtn() {
      return this.btnList;
    },
    size() {
      return this.pageSize;
    },
    count() {
      return this.pageCount;
    },
    current() {
      return this.pageNo;
    },
    curHeight() {
      return this.height;
    },
  },
  methods: {
    getDictValue(dictType, dictValue) {
      let finishValue = dictValue;
      const list = Utility.getDictList(dictType);
      if (
        list &&
        list.length > 0 &&
        typeof dictValue != "undefined" &&
        dictValue != null
      ) {
        dictValue = dictValue.toString();
        if (dictValue.indexOf(",") != -1) {
          dictValue = dictValue.split(",");
          finishValue = list
            .filter((t) => dictValue.includes(t.value))
            .map((t) => t.label)
            .join(",");
        } else {
          const item = list.find((t) => t.value == dictValue);
          if (typeof item != "undefined") {
            finishValue = item.label;
          }
        }
      }
      return finishValue;
    },
    editRow(i, d) {
      const data = {
        index: i,
        data: d[i],
      };
      this.$emit("editRow", data);
    },
    viewRow(i, d) {
      const data = {
        index: i,
        data: d[i],
      };
      this.$emit("viewRow", data);
    },
    lookSMJRow(i, d) {
      const data = {
        index: i,
        data: d[i],
      };
      this.$emit("lookSMJRow", data);
    },
    deleteRow(i, d) {
      PopupCommon.confirm("此操作将删除该数据, 是否继续?")
        .then(() => {
          const data = {
            index: i,
            data: d[i],
          };
          this.$emit("deleteRow", data);
        })
        .catch(() => {
          // 这里尽量写下，否则会报警告异常。
          console.log("已取消删除");
        });
    },
    // 页码点击事件,p当前页
    pageChange(p) {
      this.$emit("pageChange", p);
    },
    /** 改变选中行的值 */
    handleCurrentChange(val) {
      this.$emit("tableSingleRowHandleSelectionChange", val);
    },
  },
  mounted() {},
};
</script>

<style scoped>
.mcCommonPager {
  margin-top: 10px;
  background-color: #fff;
  padding: 5px 0;
}
</style>
